<template>
  <div class="role">
    <div>
      <pageSearch :formConfig="formConfig" @search="search" @reset="reset" />
    </div>

    <div class="content">
      <page-Content
        :columnsList="propList"
        @newBtnClick="handlerNewData"
        @editBtnClick="handlerEditData"
        pageName="role"
        ref="pageContentRef"
      />
    </div>

    <page-Model
      v-model:value="modelData"
      v-model:show="dialogShow"
      :modelConfig="modelConfig"
      :rowId="rowId"
      :pageName="'role'"
      ref="refPageModel"
    >
      <el-tree
        :data="[]"
        show-checkbox
        node-key="id"
        :props="{ children: 'children', label: 'name' }"
      />
    </page-Model>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

import pageSearch from '@/components/pageSearch/pageSearch.vue';
import pageContent from '@/components/pageContent';
import pageModel from '@/components/pageModel';

import { propList } from './config/content.config';
import { formConfig } from './config/search.config';
import { modelConfig } from './config/model.config';
import { usePageSearch } from '@/hooks/usePageSearch';
import { usePageModel } from '@/hooks/usePageModel';

export default defineComponent({
  setup() {
    const { search, reset, pageContentRef } = usePageSearch();
    const dialogShow = ref(false);
    const rowId = ref<null | number>(null);
    const { modelData, setModelData, clearModelData } =
      usePageModel(modelConfig);
    const refPageModel = ref<InstanceType<typeof pageModel>>();

    const showDialog = function () {
      const value = refPageModel.value;
      value && value.show();
    };

    const handlerNewData = function () {
      rowId.value = null;
      clearModelData();
      showDialog();
    };

    const handlerEditData = function (row) {
      rowId.value = row.id;
      setModelData(row);
      showDialog();
    };

    return {
      propList,
      formConfig,
      search,
      reset,
      pageContentRef,
      handlerNewData,

      modelConfig,
      dialogShow,
      modelData,
      refPageModel,
      rowId,
      handlerEditData,
    };
  },

  components: {
    pageContent,
    pageSearch,
    pageModel,
  },
});
</script>

<style lang="less" scoped>
.role {
  height: 100%;

  .content {
    height: 450px;
    margin: 10px;
  }
}
</style>
